﻿@page "/comic/viewer/{Id}"

<PageContainer Title="@book.Name">
    <Affix OffsetTop="0">
        <Space Style="float: right; background-color: rgba(255,255,255,0.3);">
            @if (_Paged)
            {
                <SpaceItem>
                    <Icon Type="select" Style="font-size: 2rem;" OnClick="OnPreview" />
                </SpaceItem>
                <SpaceItem>
                    <Icon Type="book" Style="font-size: 2rem;" OnClick="OnCovered" />
                </SpaceItem>
                <SpaceItem>
                    <Icon Type="expand" Style="@("font-size: 2rem;" + CurrentModeStyle(ModeFit))"
                          OnClick="() => OnMode(ModeFit)" />
                    <Icon Type="column-width" Style="@("font-size: 2rem;" + CurrentModeStyle(ModeWidth))"
                          OnClick="() => OnMode(ModeWidth)" />
                    <Icon Type="column-width" Style="@("font-size: 2rem;" + CurrentModeStyle(ModeHeight))" Rotate="90"
                          OnClick="() => OnMode(ModeHeight)" />
                </SpaceItem>
                <SpaceItem>
                    @if (_Scale)
                    {
                        <Icon Type="fullscreen" Style="font-size: 2rem;" OnClick="OnScale" />
                    }
                    else
                    {
                        <Icon Type="fullscreen-exit" Style="font-size: 2rem;" OnClick="OnScale" />
                    }
                </SpaceItem>
            }
        </Space>

        <Pagination Style="margin-bottom: 0.5rem; background-color: rgba(255,255,255,0.3);" Total="EntryPaginator.Total"
                    PageSize="EntryPaginator.PageSize"
                    PageIndex="EntryPaginator.PageIndex"
                    OnPageIndexChange="_paging"
                    OnPageSizeChange="_sizing"
                    ShowQuickJumper />
    </Affix>

    @if (_Paged)
    {
        <div class="viewer-contain" style="@CurrentContainStyle()">
            <!-- 父级元素要设为：relative，以确定内里块的高宽 -->
            <div class="viewer-left" @onclick="Previous">
                <!-- 上一页 -->
            </div>
            <div class="viewer-right" @onclick="Next">
                <!-- 下一页 -->
            </div>

            <img src="@_Image" style="@CurrentContentStyle()" />
        </div>
    }
    else
    {
        <AntList Grid="@gutter" DataSource="@entry">
            <ListItem Grid="@gutter">
                <div @onclick="() => OnRead(context.Key)" class="viewer-content-preview">
                    <img alt="@context.Key" src="@_Cache.GetValueOrDefault(context.Key)"/>
                </div>
            </ListItem>
        </AntList>
    }


</PageContainer>

@code {

    public ListGridType gutter = new ListGridType
    {
        Gutter = 8,
        Xs = 1,
        Sm = 1,
        Md = 2,
        Lg = 2,
        Xl = 4,
        Xxl = 5,
        Column = 5
    };

    string CurrentModeStyle(string mode)
    {
        return mode == _Mode ? "" : " color: gray;";
    }

    string CurrentContainStyle()
    {
        if (_Mode == ModeWidth)
        {
            return "";
        }
        if (_Mode == ModeHeight)
        {
            return "height: 100vh;";
        }

        return "height: 95vh;";
    }

    string CurrentContentStyle()
    {
        if (_Mode == ModeWidth)
        {
            return "max-width: 100%;";
        }
        if (_Mode == ModeHeight)
        {
            return "max-height: 100%;";
        }

        return "max-width: 100%; max-height: 100%;";
    }

}